<template>
	<view class="inquiry">
		<petDocInfo :doc="doc"></petDocInfo>
		<view class="h1">问题描述</view>
		<textarea class="input" placeholder="请输入你的问题" v-model="inquiryData.question"></textarea>
		<view class="upload">
			<uni-file-picker class="picker" v-model="imageValue" title="选择图片" limit="6" file-mediatype="image"
				@success="success" @select="select" @delete="deleteImg"></uni-file-picker>
		</view>
		<button class="btn" type="primary" @click="click">提交</button>
	</view>
</template>

<script setup>
	import petDocInfo from "@/components/petDocInfo.vue"
	import {

		ref
	} from 'vue'
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	let name = ""
	const doc = ref({})
	onLoad((params) => {
		name = params.name;
		getDoctor(name)
	})
	let base = uni.$base_url

	async function getDoctor(name) {
		let res = await uni.$get("/prod-api/api/pet-hospital/pet-doctor/list?name=" + name)

		doc.value = res.rows[0]
		doc.value.show = false
		// console.log(doc.value)
		inquiryData.value.doctorId = doc.value.id
	}

	function show() {
		doc.value.show = !doc.value.show
	}

	const inquiryData = ref({
		"doctorId": 0,
		"question": "",
		"imageUrls": []
	})
	// 上传图片列表,不知原因，添加的图片不在此数据中显示，该数据一直为空。
	const imageValue = ref([])
	// 保存选择的图片列表
	const imageList = []

	function success() {
		console.log("success");
		console.log(imageValue.value)
	}

	function select(e) {
		console.log(e);
		let upfilepath = e.tempFilePaths[0]
		console.log("選擇文件:", upfilepath);

		uni.uploadFile({
			url: '/prod-api/common/upload', //上传图片api
			filePath: upfilepath,
			name: 'file',

		}).then(res => {
			console.log(res)
			// 经过测试,res.data是json字符串,需要转换为js对象
			let data = JSON.parse(res.data)
			uni.showToast({
				icon: "none",
				title: data.msg
			})
			inquiryData.value.imageUrls.push("/prod-api/"+data.fileName)
			// console.log(inquiryData.value);
			// console.log(imageValue.value)
			imageList.push(upfilepath)
			console.log(imageList)
		})
	}

	function deleteImg(e) {
		// console.log(e)
		// console.log(inquiryData.value);
		// 删除的图片索引
		let index = imageList.findIndex(item => {
			return item == e.tempFilePath
		});
		// console.log(index)
		// 从绑定数据中移除用户删除的图片
		inquiryData.value.imageUrls.splice(index, 1)
		// 从图片列表中删除用户删除的图片
		imageList.splice(index, 1)
		// console.log(inquiryData.value);
		// console.log(imageList)
	}
	async function click() {
		console.log("submit");
		if (inquiryData.value.question == "") {
			uni.showToast({
				icon: "error",
				title: "请输入你的问题"
			})
			return
		}
		if (inquiryData.value.imageUrls.length == 0) {
			uni.showToast({
				icon: "error",
				title: "请选择图片"
			})
			return
		}
		inquiryData.value.imageUrls = inquiryData.value.imageUrls.join(",")
		let res = await uni.$post("/prod-api/api/pet-hospital/inquiry",
			inquiryData.value
		)
		// console.log(res)
		// 跳转到宠物医院主界面
		uni.switchTab({
			url:"/pages/pet/pet"
		})
	}
</script>

<style lang="scss">
	.inquiry {
		.item {
			margin: 10px;
			border: 1px solid #ccc;
			padding: 5px;

			.info {
				display: flex;
				justify-content: space-around;

				image {
					width: 200rpx;
					height: 300rpx;
					margin-right: 5px;
				}

				.dicinfo {
					width: 500rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;

					}

					.m {
						font-size: 24rpx;
						color: #999;
						line-height: 50rpx;
					}
				}
			}

			.goodat {
				margin-top: 5px;
				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 15px;
					height: 10px;
					cursor: pointer;
				}

			}

			.goodat-msg {
				font-size: 26rpx;
				color: #999;
			}
		}

		.upload {
			margin: 10px;
			display: flex;
			font-size: 26rpx;

			.picker {

				// border: 1px solid red;
				margin-left: 5px;
			}
		}

		.btn {
			margin: 20px;
		}
	}
</style>